$(function () {
var swidth = $("#focus").width() + 0.6;
var len = $("#focus ul li").length;
var index = 0;
var pictimer;
// if(index == 2){
// }
var btn =
"
/ ";
$("#focus").append(btn);
// 背景
$("#focus .btnbg").css({
background: "rgba(0, 0, 0,0.5)",
display: "flex",
"align-items": "center",
"justify-content": "space-between",
padding: "0 10px",
"box-sizing": "border-box",
});
$(".btnbg .kong").css("width", "84%");
$(".spanleft").css({
color: "#fff",
"font-family": "微软雅黑",
"font-size": "18px",
});
$(".spanleft .spanl").css("font-size", "24px");
$("#focus ul li p").css({
position: "absolute",
bottom: "13px",
width: "480px",
height: "40px",
left: "80px",
"line-height": "48px",
"text-align": "center",
"font-family": "微软雅黑",
color: "#fff",
"font-size": "18px",
overflow: "hidden",
"text-overflow": "ellipsis",
"white-space": "nowrap",
"z-index": "999",
});
$("#focus .btnbg img").css("cursor", "pointer");
$(".btnbg .spanr").text(len);
$("#focus .btnbg .spanl").text(index + 1);
// $("#focus .btn span").mouseenter(function () {
// index = $("#focus .btn span").index(this);
// showpics(index);
// }).eq(0).trigger("mouseenter");
$("#focus ul").css("width", swidth * (len + 1));
$("#focus")
.hover(
function () {
clearinterval(pictimer);
},
function () {
pictimer = setinterval(function () {
$("#focus .btnbg .spanl").text(index + 1);
// if (index >= len) {
if (index >= len) {
showfirpic();
index = 0;
$("#focus .btnbg .spanl").text(1);
} else {
showpics(index);
}
index++;
}, 3000);
}
)
.trigger("mouseleave");
// setinterval(function(){
// console.log(index);
// },3000)
function showpics(index) {
var nowleft = -index * swidth;
$("#focus ul").stop(true, false).animate({ left: nowleft }, 500);
$("#focus .btn span").removeclass("on").eq(index).addclass("on");
}
function showfirpic() {
$("#focus ul").append($("#focus ul li:first").clone());
var nowleft = -len * swidth;
//console.log(nowleft, "距离");
$("#focus ul")
.stop(true, false)
.animate({ left: nowleft }, 0, function () {
$("#focus ul").css("left", "0");
$("#focus ul li:last").remove();
});
$("#focus .btn span").removeclass("on").eq(0).addclass("on");
}
$(".imgright").click(function () {
// if (index >= len - 1) {
// index = -1;
// showfirpic();
// } else {
// $("#focus ul")
// .stop()
// .animate({ left: -index * swidth - swidth }, 500);
// }
// if (index == -1) {
// console.log(index);
// } else {
// }
if (index == 0) {
index = 1;
}
if (index > len - 1) {
index = 0;
showfirpic();
} else {
$("#focus ul")
.stop()
.animate({ left: -index * swidth }, 500);
}
$("#focus .btnbg .spanl").text(index + 1);
index++;
// if (index > len-1) {
// index = 1
// showfirpic()
// } else {
// $("#focus ul")
// .stop()
// .animate({ left: -index * swidth - swidth }, 500);
// }
//
// if (index < len) {
// index++;
// }
});
$(".imgleft").click(function () {
if(len > 0){
if (index === 0) {
index = len;
$("#focus ul").append($("#focus ul li:first").clone());
var nowleft = -index * swidth + swidth;
// var nowleft = -len * swidth;
//console.log(nowleft, "距离");
$("#focus ul")
.stop(true, false)
.animate({ left: nowleft }, 0, function () {
$("#focus ul").css("left", nowleft);
$("#focus ul li:last").remove();
});
$("#focus .btn span").removeclass("on").eq(0).addclass("on");
} else {
console.log(-index * swidth + swidth);
$("#focus ul")
.stop()
.animate({ left: -index * swidth + swidth }, 500);
$("#focus .btnbg .spanl").text(index);
}
$("#focus .btnbg .spanl").text(index);
index--;
}
});
});